<template>
  <div class="chat-messages">
    <div
        v-for="(message, index) in messages"
        :key="index"
        :class="['message', message.isUser ? 'user-message' : 'ai-message']"
    >
      <!-- 头像 -->
      <div class="avatar" v-if="!message.isUser">
        <!-- AI 机器人头像 -->
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="12" fill="#00ccff" />
          <path
              d="M12 6C9.79 6 8 7.79 8 10C8 12.21 9.79 14 12 14C14.21 14 16 12.21 16 10C16 7.79 14.21 6 12 6ZM12 16C8.69 16 6 18.69 6 22H18C18 18.69 15.31 16 12 16Z"
              fill="#ffffff"
          />
          <circle cx="9" cy="10" r="1" fill="#ffffff" />
          <circle cx="15" cy="10" r="1" fill="#ffffff" />
          <path
              d="M12 18C10.34 18 9 16.66 9 15H15C15 16.66 13.66 18 12 18Z"
              fill="#ffffff"
          />
        </svg>
      </div>

      <!-- 消息内容 -->
      <div class="message-content">
        {{ message.text }}
      </div>

      <!-- 用户头像 -->
      <div class="avatar" v-if="message.isUser">
        <!-- 可爱小兔子头像 -->
        <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="12" fill="#ff7eb9" />
          <circle cx="9" cy="10" r="1" fill="#ffffff" />
          <circle cx="15" cy="10" r="1" fill="#ffffff" />
          <path
              d="M12 18C10.34 18 9 16.66 9 15H15C15 16.66 13.66 18 12 18Z"
              fill="#ffffff"
          />
          <path
              d="M12 14C10.34 14 9 12.66 9 11H15C15 12.66 13.66 14 12 14Z"
              fill="#ffffff"
          />
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  messages: {
    type: Array,
    required: true,
  },
});
</script>

<style scoped>
/* 消息区域样式 */
.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #ffffff;
}

/* 自定义滚动条样式 */
.chat-messages::-webkit-scrollbar {
  width: 8px; /* 滚动条宽度 */
}

.chat-messages::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* 滚动条轨道背景 */
  border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(0, 123, 255, 0.6); /* 滚动条滑块颜色 */
  border-radius: 4px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 123, 255, 0.8); /* 滚动条滑块悬停颜色 */
}

/* 消息样式 */
.message {
  display: flex;
  margin-bottom: 20px;
  align-items: flex-start;
}

/* 头像样式 */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.avatar svg {
  width: 100%;
  height: 100%;
}

/* 消息内容样式 */
.message-content {
  max-width: 70%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* 用户消息样式 */
.user-message {
  justify-content: flex-end;
}

.user-message .message-content {
  background: linear-gradient(135deg, #007bff, #00ccff);
  color: #ffffff;
  border-top-right-radius: 4px;
  margin-right: 10px;
}

/* AI 消息样式 */
.ai-message {
  justify-content: flex-start;
}

.ai-message .message-content {
  background: linear-gradient(135deg, #f0f4ff, #e6f0ff);
  color: #333;
  border-top-left-radius: 4px;
  margin-left: 10px;
}
</style>